<template>
    <el-row class="row-bg" justify="center" style="margin-top: 200px">
        <el-col :span="6">
            <el-card shadow="always" class="login-box">
                <template #header>
                    <div class="card-header"> 登录 </div>
                </template>
                <el-form ref="formRef" :model="ruleForm" :rules="rules" label-width="80px" class="demo-ruleForm"
                    size="default" label-position="left" status-icon>
                    <el-form-item label="账号" prop="name">
                        <el-input v-model="ruleForm.name" placeholder="请输入账号" />
                    </el-form-item>
                    <el-form-item label="密码" prop="pwd">
                        <el-input v-model="ruleForm.pwd" placeholder="请输入密码" type="password" show-password />
                    </el-form-item>
                    <el-form-item class="btn">
                        <el-button style="width: 100%" type="primary" @click="submitForm(formRef)">确定</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-col>
    </el-row>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { useRouter } from 'vue-router';
import { permissionsRoutes } from "/@/router/modules/routes"
import { useMenuStore,useAddRouteStore } from "/@/store"
import type { RouteRecordRaw } from "vue-router";
// import {login} from '/@/api/sys';
import { ElMessage } from 'element-plus';

const router = useRouter();
const ruleForm = reactive({
    name: '',
    pwd: ''
});

const rules = reactive<FormRules>({
    name: [{ required: true, message: '请输入账号', trigger: 'blur' }],
    pwd: [{ required: true, message: '请输入密码', trigger: 'blur' }]
});

const formRef = ref<FormInstance>();
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            onLogin();
        } else {
            console.log('error submit!', fields);
        }
    });
};

const onLogin = async () => {
    // console.log(import.meta.glob('**'),'glob')
    useAddRouteStore().getRouter(JSON.parse(JSON.stringify(permissionsRoutes)));
    console.log(useAddRouteStore().whiteList, 'whiteList')
    // // 初始化menu数据
    useMenuStore().menuRecursion(useAddRouteStore().whiteList);
    router.push('/dashboard');
};
</script>

<style scoped lang="less">
.card-header {
    text-align: center;
}

.demo-ruleForm {
    padding: 10px 15px;

    .btn:deep(.el-form-item__content) {
        margin-left: 0 !important;
    }
}
</style>
